<template name="userEdit">
	<section class="contextual-bar__content">
		{{#unless canEditOrAdd}}
			<p class="secondary-font-color">{{_ "You_are_not_authorized_to_view_this_page"}}</p>
		{{else}}
		<form action="index.html" method="post" autocomplete="off">
			<div class="rc-form-group rc-form-group--small">
				<label class="rc-form-label">
					{{_ "Profile_picture"}}
				</label>
				<div class="rc-select-avatar">
					<div class="rc-select-avatar__preview">
						{{#if avatarPreview}}
							{{#if $eq avatarPreview.service 'initials'}}
								{{> avatar username=avatarPreview.blob}}
							{{else}}
								{{> avatar url=avatarPreview.blob}}
							{{/if}}
						{{else}}
							{{> avatar username=user.username}}
						{{/if}}
					</div>

					<div class="rc-select-avatar__list">
						<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="{{_ "initials_avatar" }}">
							{{> avatar username=initialsUsername }}
						</div>
						<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="{{_ "Upload_user_avatar" }}">
							<label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
								{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
							</label>
							<input type="file" name="" value="" id="upload-avatar" style="display:none;" accept="image/x-png,image/gif,image/jpeg">
						</div>
						<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}" aria-label="{{_ "Use_url_for_avatar" }}">
							<label class="rc-select-avatar__upload-label avatar">
								{{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
							</label>
						</div>

						<div class="rc-input">
							<label class="rc-input__label">
								<div class="rc-input__title">
									{{_ "Use_url_for_avatar"}}
								</div>
								<div class="rc-input__wrapper">
									<input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
								</div>
							</label>
						</div>
					</div>
				</div>
			</div>
			<div class="rc-input rc-form-group rc-form-group--small">
					<label class="rc-input__label">
							<div class="rc-input__title">
								{{_ "Name"}}
							</div>
							<div class="rc-input__wrapper">
									<input name="name" type="text" class="rc-input__element rc-input__element--small" id="name" autocomplete="off" value="{{user.name}}"/>
							</div>
					</label>
			</div>
			<div class="rc-input rc-form-group rc-form-group--small">
					<label class="rc-input__label">
							<div class="rc-input__title">
								{{_ "Username"}}
							</div>
							<div class="rc-input__wrapper">
									<div class="rc-input__icon">
										{{> icon icon='at' }}
									</div>
									<input name="name" type="text" class="rc-input__element rc-input__element--small" id="username" autocomplete="off" value="{{user.username}}"/>
							</div>
					</label>
			</div>
			<div class="rc-form-group rc-form-group--small">
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Email"}}</div>
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{> icon icon='mail' }}
							</div>
							<input name="name" type="text" class="rc-input__element rc-input__element--small" id="email" autocomplete="off" value="{{user.emails.[0].address}}"/>
						</div>
					</label>
				</div>
				<div class="rc-switch">
					<label class="rc-switch__label" tabindex="-1">
						<input type="checkbox" class="rc-switch__input" name="type" id="verified" value="1" checked="{{user.emails.[0].verified}}"/>
						<span class="rc-switch__button">
							<span class="rc-switch__button-inside"></span>
						</span>
						<span class="rc-switch__text">
							{{_ "Verified"}}
						</span>
					</label>
				</div>
			</div>

			<div class="rc-form-group rc-form-group--small">
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "StatusMessage"}}</div>
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{> icon icon='edit' }}
							</div>
							<input name="name" type="text" maxlength="120" class="rc-input__element rc-input__element--small" id="status" autocomplete="off" value="{{user.statusText}}"/>
						</div>
					</label>
				</div>
			</div>


			<div class="rc-form-group rc-form-group--small">
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Bio"}}</div>
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{> icon icon='edit' }}
							</div>
							<input name="name" type="text" maxlength="260" class="rc-input__element rc-input__element--small" id="bio" autocomplete="off" value="{{user.bio}}"/>
						</div>
					</label>
				</div>
			</div>


			{{#if hasPermission 'edit-other-user-password'}}
			<div class="rc-form-group rc-form-group--small rc-form-group--inline" style="position: relative;">
				<div class="rc-input rc-form-item-inline">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Password"}}</div>
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{> icon icon='key' }}
							</div>
							<input name="password" class="rc-input__element rc-input__element--small" type="password" id="password" autocomplete="off" value="" disabled="{{requirePasswordChangeDisabled}}" style="padding-right: 70px"/>
						</div>
					</label>
				</div>
				<button id="randomPassword" class="rc-button rc-button--primary rc-form-item-inline rc-button--nude rc-button--small" style="right: 0; position: absolute; bottom: 10px; " disabled="{{requirePasswordChangeDisabled}}">{{_ 'Random'}}</button>
			</div>

			<div class="rc-form-group rc-form-group--small rc-switch">
				<label class="rc-switch__label" tabindex="-1">
					<input class="rc-switch__input" type="checkbox" id="setRandomPassword" value="1" checked="{{setRandomPassword}}"/>
					<span class="rc-switch__button">
						<span class="rc-switch__button-inside"></span>
					</span>
					<span class="rc-switch__text">
						{{_ "Set_random_password_and_send_by_email"}}
					</span>
				</label>
			</div>
			<div class="rc-form-group rc-form-group--small rc-switch">
				<label class="rc-switch__label" tabindex="-1">
					<input class="rc-switch__input" type="checkbox" id="changePassword" value="1" checked="{{requirePasswordChange}}" disabled="{{requirePasswordChangeDisabled}}"/>
					<span class="rc-switch__button">
						<span class="rc-switch__button-inside"></span>
					</span>
					<span class="rc-switch__text">
						{{_ "Require_password_change"}}
					</span>
				</label>
			</div>
			{{/if}}

			<div class="rc-form-group rc-form-group--small">
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Roles"}}</div>
						<div class="rc-input__wrapper">
							{{#let roles=role}}
								<select id="roleSelect" class="rc-input rc-form-item-inline rc-input--small" {{disabled role}}>
									<option value="placeholder" disabled selected>{{_ "Select_role"}}</option>
									{{#each roles}}
										<option value="{{_id}}">{{name}}</option>
									{{/each}}
								</select>
							{{/let}}
						</div>
					</label>
				</div>
				<ul id="roles" class="chip-container current-user-roles">
					{{#each userRoles}}
						<li class="remove-role" title="{{this}}"><i class="icon icon-cancel-circled"></i>{{this}}</li>
					{{/each}}
				</ul>
			</div>

			{{#unless user}}
			<div class="input-line">
				<label for="joinDefaultChannels">
					<input type="checkbox" id="joinDefaultChannels" value="1" checked="true">
					{{_ "Join_default_channels"}}
				</label>
			</div>
			<div class="input-line">
				<label for="sendWelcomeEmail">
					<input type="checkbox" id="sendWelcomeEmail" value="1" checked="true">
					{{_ "Send_welcome_email"}}
				</label>
			</div>
			{{/unless}}
			<div class="rc-user-info__flex rc-user-info__row">
				<button class='rc-button rc-button--cancel cancel' type="button"><span>{{_ "Cancel"}}</span></button>
				<button class='rc-button rc-button--primary save'><span>{{_ "Save"}}</span></button>
			</div>
		</form>
		{{/unless}}
	</section>
</template>
